<template>
	<view>
		<movable-area :style="{ height: areaHeight }">
			<block v-for="(item, index) in list">
				<movable-view
					:key="item.sign"
					@longpress="touchStart(index)"
					@change="e => change(e, index)"
					@touchend="touchend()"
					class="drag_item"
					:class="{ item_act: current == index }"
					:y="item.y"
					direction="vertical"
					:disabled='disabled'
				>
					<u-swipe-action :show="item.show" :index="index" :key="item.sign" @click="click" @open="open" :options="options">
						<view class="touch_view">
							<view class="left">
								<!-- <u-icon :size="50" :color="item.iconColor" :name="item.iconName"></u-icon> -->
								<text>{{ item.text }}</text>
							</view>
							<view class="right">
								<!-- <u-icon :size="50" color="#B7B7BA" name="list"></u-icon> -->
								≡
							</view>
						</view>
					</u-swipe-action>
				</movable-view>
			</block>
		</movable-area>
	</view>
</template>

<script>
	import uSwipeAction from '@/components/u-swipe-action/u-swipe-action.vue'
export default {
	components: {uSwipeAction},
	props: {
		propList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			itemHeight: uni.upx2px(110),//每一个item的高度，我是css是108rpx 预留了2px放下划线
			current: -1,//当前选择的index
			oldIndex: -1,//记录移动前的位置，为了和移动后进行比较是否发生了位移
			newIndex: -1,//当前移动到的位置
			disabled: true,//是否可以拖动
			list: [],//渲染的list
			cloneList: [],//拷贝一份备用
			options: [ //uview的方法
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			]
		};
	},
	mounted() {},
	computed: {
		areaHeight() {
			return this.list.length * this.itemHeight + 'px';
		},
	},
	watch: {
		propList: {
			handler(val) {
				this.list = this.updateList(val);
				this.cloneList = JSON.parse(JSON.stringify(this.list));
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// 添加或更新数组y值
		updateList(list = []) {
			return list.map((item, index) => {
				return {
					...item,
					y: index * this.itemHeight,
					show: false,
					sign: Math.random() + index//防止不更新的情况和标识位
				};
			});
		},
		touchStart(index) {
			this.disabled = false
			this.current = index;
			this.oldIndex = index;
		},
		change(e, index) {
			// 不是当前元素位移直接不处理
			if (index != this.current) return;
			//位移的距离px
			let difference = e.detail.y - this.current * this.itemHeight;
			//计算位移几个位置
			let tempIndex = difference > 0 ? parseInt((difference + (this.itemHeight/2)) / this.itemHeight) : parseInt((difference - (this.itemHeight/2)) / this.itemHeight);
			//当前拖到的位置
			this.newIndex = Math.abs(this.current + tempIndex);
			
			if (this.newIndex > -1 && this.oldIndex > -1 && this.newIndex !== this.oldIndex) {
				this.changeList();
			}
		},
		changeList() {
			// 没想到怎么改变原数组, 直接拷贝一份数组出来,不考虑情况 一把梭 直接遍历拷贝的原数组.
			//直接把改变位置赋值回去不行，不知道为什么，只能改变每一项的y值
			let arr = JSON.parse(JSON.stringify(this.cloneList));
			arr.splice(this.newIndex, 0, ...arr.splice(this.current, 1));
			this.list.forEach((item, index) => {
				if (index !== this.current) {
					item.y = arr.findIndex(citem => citem.sign == item.sign) * this.itemHeight;
				}
			});
			this.oldIndex = this.newIndex;
		},
		touchend() {
			if(this.newIndex > -1 && this.current > -1 && this.newIndex !== this.current){
				this.cloneList.splice(this.newIndex, 0, ...this.cloneList.splice(this.current, 1));
				this.list = this.updateList(this.cloneList);
				this.cloneList = JSON.parse(JSON.stringify(this.list));
				this.emitChang(this.list)
			}
			this.current = -1;
			this.oldIndex = -1;
			this.newIndex = -1;
			this.disabled = true
		},
		click(index, index1) {
			if (index1 == 0) {
				this.list.splice(index, 1);
				this.$u.toast(`删除了第${index}个cell`);
				this.list = this.updateList(this.list)
				this.cloneList = JSON.parse(JSON.stringify(this.list))
				this.emitChang(this.list)
			}
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.list[index].show = true;
			this.list.map((val, idx) => {
				if (index != idx) this.list[idx].show = false;
			});
		},
		emitChang (arr){
			let tempArr = JSON.parse(JSON.stringify(arr))
			tempArr.forEach(item => {
				delete item.y
				delete item.show
				delete item.sign
			})
			this.$emit('change', tempArr)
		}
	}
};
</script>

<style lang="scss">
.drag_item {
	width: 100%;
	background-color: #fff;
	height: max-content;
	border-bottom: 1px solid #e3e3e3;
	&:nth-last-of-type(1) {
		border: none;
	}
}

movable-area {
	width: 100%;
	background-color: #fff;
	overflow: hidden;
}
.drag_item.item_act {
	border: 1px solid #ffe44b;
	z-index: 999;
	box-sizing: border-box;
}
.touch_view {
	width: 690rpx;//设置100%时候会有闪动
	padding: 0 30rpx;
	box-sizing: border-box;
	height: 108rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left {
		display: flex;
		align-items: center;
		text {
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #666666;
		}
	}
}
</style>
